<template>
    <div :class="$style['event-container-fixed']" v-if="show"
        :style="{ right: position.right + 'px', bottom: position.bottom + 'px' }" ref="dragRef">
        <div :class="$style['event-tooltip']" @mousedown="startDrag">
            <div :class="$style['event-icon-wrapper']">
                <el-image :src="require('@/assets/event-fixed-lb.png')" />
                <span>{{ info.event_name }}</span>
            </div>
            <el-icon :size="12" color="#A6B8C6" @click="show = false">
                <Close />
            </el-icon>
        </div>
        <div :class="$style['event-content-container']">
            <FixedMap :class="$style['map-wrapper']" id="map_1" ref="eventOpenlayersRef" v-if="mapInfo?.id" />
            <div :class="$style['map-wrapper']" v-else>
                暂无地图
            </div>
            <div :class="$style['event-text-container']">
                <div :class="$style['device-title']">{{ info.device_name }}</div>
                <el-form>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="事件类型:">{{ info.event_type_name }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="事件等级:">{{ info.event_level_name }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备类型:">{{ info.node_name }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备区域:">{{ info.area_name }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发生时间:">{{ info.event_time }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备位置:">{{ info.dvc_installation }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="事件判定:" style="margin-top:10px;">
                        <el-radio-group v-model="info.handle_result" size="small" style="width:100%;">
                            <el-row style="width:100%;">
                                <el-col :span="8" v-for="(item, index) in results" :key="index">
                                    <el-radio :value="item.name" :key="index" border>
                                        {{ item.name }}
                                    </el-radio>
                                </el-col>
                            </el-row>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div :class="$style['event-button-container']">
            <el-button size="small" @click="show = false">取消</el-button>
            <el-button size="small" type="primary" @click="voteSubmit">确认</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, nextTick, onUnmounted } from 'vue'
import { fetchMapByDevice } from '@/api/map.services'
import FixedMap from "@/components/maps/FixedMap.vue"
import { fetchEventVote, eventhandleSubmit } from '@/api/event.services'
const eventOpenlayersRef = ref(null)
import { Close } from '@element-plus/icons-vue'
const info = ref({})
const step = ref({})
const modules = ref([])
const show = ref(false)
const results = ref([])
const mapInfo = ref({})
const getMapInfo = async (id) => {
    const result = await fetchMapByDevice(info.value.device_id)
    if (result.code == 1 && result.data) {
        mapInfo.value = result.data
        nextTick(() => {
            eventOpenlayersRef.value?.init(result.data, 14, callback, 'map_1')
        })
    }
}
const callback = (data) => {
    console.log('callback', data)
}
// 添加拖拽相关变量
const dragRef = ref(null)
const position = ref({ right: 0, bottom: 0 })
const isDragging = ref(false)
const startPos = ref({ x: 0, y: 0 })
let initialPosition
/***
 * * @description: 开始拖拽
 * * @param event
 * */
const startDrag = (event) => {
    if (event.target.closest('.el-icon')) return // 如果点击的是关闭按钮，不启动拖拽

    isDragging.value = true
    startPos.value = {
        x: event.clientX,
        y: event.clientY
    }

    // 记录初始位置
    initialPosition = {
        right: position.value.right,
        bottom: position.value.bottom
    }

    // 添加鼠标移动和松开事件监听
    document.addEventListener('mousemove', onDrag)
    document.addEventListener('mouseup', stopDrag)

    // 阻止默认行为和冒泡
    event.preventDefault()
}
/***
 * * @description: 报警信息框拖拽
 * * @param {MouseEvent} e
 */
const onDrag = (e) => {
    if (!isDragging.value) return

    // 计算移动距离
    const deltaX = startPos.value.x - e.clientX
    const deltaY = startPos.value.y - e.clientY

    // 更新位置
    position.value = {
        right: initialPosition.right + deltaX,
        bottom: initialPosition.bottom + deltaY
    }
}
/***
 * * @description: 停止拖拽
 * * @param {MouseEvent} e
 * */
const stopDrag = () => {
    isDragging.value = false
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
}
const mode = ref(1)
/***
 * * @description: 打开报警信息框
 * * @param {Object} msg
 * * @param {Array} data
 */
const open = (msg, data, type) => {
    mode.value = type
    results.value = data
    info.value = msg.event || {}
    step.value = msg.step || {}
    modules.value = msg.modules || []
    mapInfo.value = {}
    getMapInfo()
    show.value = true
    //重置位置
    position.value = { right: 0, bottom: 0 }
}
defineExpose({
    open
})
/***
 * * @description: 组件卸载时清理事件监听
 */
onUnmounted(() => {
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
})
/**
 * @description: 事件处理1:工作流的事件判定模块和报警墙的事件处理
 * @description: 事件判定模块
 * */
const voteSubmit = async () => {
    let result
    let params
    if (mode.value == 2) {
        params = {
            event_id: info.value.event_id,
            handle_remark: info.value.handle_remark || null,
            handle_result: info.value.handle_result || null
        }
        result = await eventhandleSubmit(params)
        if (result.code == 1) {
            show.value = false
            info.value = {}
        }
        return
    }

    if (!info.value.handle_result) {
        info.value.handle_id = null
        info.value.handle_result = null
    } else {
        info.value.handle_id = results.value.find(item => item.name == info.value.handle_result).id
    }
    params = {
        event: info.value,
        step: step.value,
        modules: modules.value
    }
    result = await fetchEventVote(params)
    if (result.code == 1) {
        show.value = false
    }
}
</script>
<style lang="scss" module>
.event-container-fixed {
    position: fixed;
    /*right: 0;
    bottom: 0;*/
    width: 760px;
    height: 330px;
    background: #FFFFFF;
    z-index: 9999;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.22);
    border-radius: 4px;
    border: 1px solid #D5D8E2;
    background-image: url('@/assets/event-fixed-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

.event-tooltip {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 35px;
    padding: 0 10px;
    align-items: center;

    & [class~='el-icon'] {
        cursor: pointer;
    }
}

.event-icon-wrapper {
    font-size: 14px;
    font-weight: bold;
    color: #EF1824;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    & [class~='el-image'] {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
}

.event-content-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
}

.map-wrapper {
    flex: 250px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #333333;
    border: 1px solid #E5E5E5;
}

.event-text-container {
    flex: 1;
    padding-left: 10px;

    & [class~='el-col'] {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        height: 30px;
        line-height: 30px;
    }

    & [class~='el-radio'] {
        width: 80%;
        text-align: center;
    }
}

.device-title {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
}

.event-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 0px 0px 4px 4px;
    border: 1px solid #D5D8E2;

    & [class~='el-button'] {
        width: 80px;
    }

    & [class~='el-button']:nth-child(1) {
        margin-right: 20px;
    }
}
</style>